<template>
    <view class="container">
        <view class="top-box">
            <view class="serach-box flex col-center">
                <view class="search flex col-center">
                    <view class="icon-border" @click="scan">
                        <uni-icons type="scan" size="25"></uni-icons>
                    </view>
                    <u-input v-model="searchVal" type="text" clearable placeholder="请手动输入电子标签" />
                </view>
                <button class="confirm-btn" @click="confirm">确认</button>
            </view>
        </view>
        <view class="p-30">
            <view class="m-b-20">
                <view class="flex coe-center row-between p-20">
                    <view class="bold ">编辑信息 </view>
                    <view @click="goPages"><uni-tag text="查看品控列表" /> </view>
                </view>
                <u-line color="black" />
            </view>
            <view v-if="JSON.stringify(goodsInfo) === '{}'" class="empty flex col-center row-center">
                <u-empty text="暂无数据" mode="list"></u-empty>
            </view>
            <view v-else class="bg-white p-30">
                <view class="m-t-20 ">
                    <view class="bold m-b-10">编辑信息 </view>
                    <u-line color="black" />
                    <view class="m-t-20"></view>
                    <uni-forms :model="goodsInfo">
                        <uni-forms-item label="商品编号">
                            <uni-easyinput disabled v-model="goodsInfo.productNo" type="text" border="none" />
                        </uni-forms-item>
                        <uni-forms-item label="品牌">
                            <uni-data-select v-model="goodsInfo.brand" :localdata="brandList"
                                @change="handleChangeBrand"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="颜色">
                            <uni-easyinput v-model="goodsInfo.colour" type="text" border="none" placeholder="请输入颜色" />
                        </uni-forms-item>
                        <uni-forms-item label="系列">
                            <uni-data-select v-model="goodsInfo.model" v-if="seriesList.length > 0"
                                :localdata="seriesList" @change="handleChange"></uni-data-select>
                            <uni-easyinput v-model="goodsInfo.model" v-else type="text" border="none" 请输入系列 />
                        </uni-forms-item>
                        <uni-forms-item label="上传图片">
                            <uni-file-picker v-model="fileList" return-type="object" file-mediatype="image"
                                @select="handleSelect">
                            </uni-file-picker>
                        </uni-forms-item>
                        <uni-forms-item label="单位">
                            <uni-easyinput disabled v-model="goodsInfo.unit" type="text" border="none" />
                        </uni-forms-item>
                        <uni-forms-item label="表壳">
                            <uni-data-select v-model="goodsInfo.watchMaterial"
                                :localdata="watchMaterialList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="表圈">
                            <uni-data-select v-model="goodsInfo.watchBezel"
                                :localdata="watchBezelList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="表盘">
                            <uni-data-select v-model="goodsInfo.dialPlate" :localdata="dialPlateList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="表盘尺寸">
                            <uni-easyinput v-model="goodsInfo.dialSize" type="text" border="none"
                                placeholder="请输入表盘尺寸" />
                        </uni-forms-item>
                        <uni-forms-item label="表带">
                            <uni-data-select v-model="goodsInfo.materialStrap"
                                :localdata="materialStrapList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="手围尺寸">
                            <uni-easyinput v-model="goodsInfo.handCircumferenceSize" type="text" border="none"
                                placeholder="请输入手围尺寸" />
                        </uni-forms-item>
                        <uni-forms-item label="销售价格">
                            <uni-easyinput v-model="goodsInfo.salesPrice" type="text" border="none"
                                placeholder="请输入销售价格" />
                        </uni-forms-item>
                        <uni-forms-item label="采购价格">
                            <uni-easyinput v-model="goodsInfo.procurementPrice" type="text" border="none"
                                placeholder="请输入采购价格" />
                        </uni-forms-item>
                        <uni-forms-item label="成色">
                            <uni-data-select v-model="goodsInfo.colorQuality"
                                :localdata="colorQualityList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="手表类型">
                            <uni-data-select v-model="goodsInfo.watchType" :localdata="watchTypeList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="状态">
                            <uni-data-select v-model="goodsInfo.productStatus"
                                :localdata="productStatusList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="保卡">
                            <uni-data-select v-model="goodsInfo.warrantyPeriod"
                                :localdata="warrantyPeriodList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="库存">
                            <uni-easyinput disabled v-model="goodsInfo.procurementInventory" type="text" border="none"
                                placeholder="请输入库存" />
                        </uni-forms-item>
                        <uni-forms-item label="是否售出">
                            <uni-data-select v-model="goodsInfo.sold" :localdata="soldList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="鉴定信息">
                            <uni-data-select v-model="goodsInfo.authenticate"
                                :localdata="authenticateList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="是否借出">
                            <uni-data-select v-model="goodsInfo.lendingStatus"
                                :localdata="lendingStatusList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="是否上架">
                            <uni-data-select v-model="goodsInfo.listingStatus"
                                :localdata="listingStatusList"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="物流编号">
                            <uni-easyinput v-model="goodsInfo.logisticsNo" type="text" border="none"
                                placeholder="请输入物流编号" />
                        </uni-forms-item>
                        <uni-forms-item label="状态">
                            <u-tag v-if="goodsInfo.status == 0" type="warning" text="未同步"></u-tag>
                            <u-tag v-if="goodsInfo.status == 1" type="success" text="已同步"></u-tag>
                        </uni-forms-item>
                    </uni-forms>
                    <view class="flex col-center row-between p-30">
                        <u-button type="success" @click="sync">点击同步</u-button>
                        <u-button type="primary" @click="submit">点击保存</u-button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
    import {
        ref,
        watch
    } from 'vue'
    import {
        onLoad
    } from '@dcloudio/uni-app'
    import {
        apiAddQualityInfo,
        apiGetAllBrand,
        apiGetSeriesByBrandId,
        apiUploadFile,
        apiUpdateQualityInfo,
        apiUpdataDataToStore
    } from '@/api/index.js'
    import {
        IMG_BASE_URL,
        API_BASE_URL
    } from '@/utils/appConfig.js'

    const searchVal = ref('')
    const id = ref('')
    const goodsInfo = ref({})
    const type = ref('')

    const brandList = ref([]) //品牌
    const seriesList = ref([]) //系列
    const fileList = ref([])
    const watchMaterialList = [{
        text: '金属',
        value: '0'
    }, {
        text: '钛合金',
        value: '1'
    }, {
        text: '铝合金',
        value: '2'
    }, {
        text: '贵金属',
        value: '3'
    }, {
        text: '陶瓷',
        value: '4'
    }, {
        text: '复合材料',
        value: '5'
    }]
    const watchBezelList = [{
        text: '原钻',
        value: '0'
    }, {
        text: '后钻',
        value: '1'
    }, {
        text: '原表圈',
        value: '2'
    }, {
        text: '后改圈',
        value: '3'
    }]
    const dialPlateList = [{
        text: '原盘',
        value: '0'
    }, {
        text: '后换盘',
        value: '1'
    }]
    const materialStrapList = [{
        text: '硅胶',
        value: '0'
    }, {
        text: '金属带',
        value: '1'
    }, {
        text: '皮带',
        value: '2'
    }, {
        text: '尼龙',
        value: '3'
    }, {
        text: '编织',
        value: '4'
    }, {
        text: '牛皮',
        value: '5'
    }, {
        text: '鳄鱼皮',
        value: '6'
    }]
    const colorQualityList = [{
        text: '99',
        value: '0'
    }, {
        text: '98',
        value: '1'
    }, {
        text: '95',
        value: '2'
    }, {
        text: '85',
        value: '3'
    }, {
        text: '80',
        value: '4'
    }]
    const watchTypeList = [{
        text: '机械',
        value: '0'
    }, {
        text: '石英',
        value: '1'
    }]
    const productStatusList = [{
        text: '翻新完成',
        value: '0'
    }, {
        text: '翻新中',
        value: '1'
    }, {
        text: '未翻新',
        value: '2'
    }]
    const warrantyPeriodList = [{
        text: '无',
        value: '0'
    }, {
        text: '在保',
        value: '1'
    }, {
        text: '过期',
        value: '2'
    }]
    const soldList = [{
        text: '已售',
        value: '1'
    }, {
        text: '在库',
        value: '2'
    }]
    const authenticateList = [{
        text: '已鉴定',
        value: '1'
    }, {
        text: '未鉴定',
        value: '2'
    }]
    const lendingStatusList = [{
        text: '未借出',
        value: '0'
    }, {
        text: '已借出',
        value: '1'
    }]
    const listingStatusList = [{
        text: '下架',
        value: '0'
    }, {
        text: '上架',
        value: '1'
    }]

    const goPages = () => {
        uni.navigateTo({
            url: '/pages/setting/control/list'
        })
    }

    //扫码
    const scan = () => {
        // 允许从相机和相册扫码
        uni.scanCode({
            success: function(res) {
                addGoodslist(res.result)
            }
        });
    }

    const confirm = () => {
        addGoodslist(searchVal.value)
    }

    //扫码添加
    const addGoodslist = async (productNo) => {
        try {
            if (productNo) {
                // 调用扫码添加商品接口
                let res = await apiAddQualityInfo({
                    productNo
                })
                if (res.code == 200) {
                    goodsInfo.value = res.data
                    uni.$u.toast('添加成功')
                } else {
                    uni.$u.toast(`${res.msg}`)
                }
            } else {
                uni.$u.toast('请输入商品编号')
            }
        } catch (error) {
            uni.$u.toast(`${error}`)
        }
    }

    //查询品牌名称
    const getBrandName = (bid) => {
        const brand = brandList.value.find(item => item.value == bid)
        return brand ? brand.text : ''
    }

    //获取全部分类
    const getAllBrandList = () => {
        apiGetAllBrand().then(res => {
            brandList.value = res.data.map(item => {
                return {
                    text: item.brandName,
                    value: item.id
                }
            })
        })
    }

    const handleChangeBrand = (e) => {
        handleSelectBrand(e)
    }

    //获取系列
    const handleSelectBrand = async (id) => {
        let brandId = id ? id : goodsInfo.value.brand
        let res = await apiGetSeriesByBrandId({
            headId: brandId
        })
        if (res.code == 200) {
            if (res.data && Array.isArray(res.data)) {
                seriesList.value = res.data.map(item => {
                    return {
                        text: item.seriesName,
                        value: item.seriesNo
                    }
                })
                if (seriesList.value.length == 0) {
                    goodsInfo.value.model = ''
                }
            }
        } else {
            ElMessage.error('获取系列失败')
        }
    }

    //确认选择
    const handleChange = (e) => {
        goodsInfo.value.productModel = seriesList.value.find(item => item.value == e).text
    }

    //选择图片
    const handleSelect = (files) => {
        let file = files.tempFiles[0]
        uploadImage(file)
    }
    //上传图片
    const uploadImage = (file) => {
        uni.uploadFile({
            url: `${API_BASE_URL}/seven/secondHandWarehouse/photoUpload`,
            filePath: file.path,
            name: 'file',
            formData: {
                id: goodsInfo.value.id // 附加参数
            },
            header: {
                'Authorization': uni.getStorageSync('token')
            },
            success: (res) => {
                let data = JSON.parse(res.data)
                goodsInfo.value.photoAddress = data.data
                uni.showToast({
                    title: `图片上传成功`
                })
            },
            fail: (err) => {
                console.log(err, 'err');
            }
        })
    }

    const submit = async () => {
        try {
            const {
                handCircumferenceSize,
                dialSize
            } = goodsInfo.value;
            goodsInfo.value.handCircumferenceSize = handCircumferenceSize ?
                `${handCircumferenceSize}${handCircumferenceSize.includes('cm') ? '' : 'cm'}` : '0cm'
            goodsInfo.value.dialSize = dialSize ? `${dialSize}${dialSize.includes('mm') ? '' : 'mm'}` : '0mm'
            let res = await apiUpdateQualityInfo({
                ...goodsInfo.value
            })
            if (res.code == 200) {
                uni.$u.toast('修改成功')
            }
        } catch (err) {

        }
    }

    const sync = async () => {
        try {
            let res = await apiUpdataDataToStore({
                ...goodsInfo.value
            })
            if (res.code == 200) {
                uni.$u.toast('同步成功')
            }
        } catch (err) {

        }
    }

    onLoad((option) => {
        getAllBrandList()
    })
</script>

<style lang="scss">
    body {
        padding: 0;
    }

    .container {
        width: 100vw;
        height: 100vh;

        .top-box {
            padding: 30rpx;
            background-color: #FBC260;

            .top-text {
                color: #222222;
                font-size: 26rpx;
                opacity: 0.8;
            }

            .serach-box {

                .search {
                    width: 480rpx;
                    height: 86rpx;
                    padding: 0 40rpx;
                    background: #FFFFFF;
                    border-radius: 10px;

                    .icon-border {
                        padding-right: 20rpx;
                        margin-right: 30rpx;
                        border-right: 3rpx solid #FBC260;
                    }
                }

                .confirm-btn {
                    color: #fff;
                    width: 159rpx;
                    height: 86rpx;
                    line-height: 86rpx;
                    font-size: 30rpx;
                    margin-left: 30rpx;
                    background: linear-gradient(0deg, #E87038, #BE4B16);
                    border-radius: 10rpx;
                }
            }
        }

        .main {


            .empty {
                background-color: #F4F8FB;
                height: 100%;
            }

            .goods-img {
                width: 215rpx;
                height: 215rpx;
                margin-right: 30rpx;
            }

            .text-color {
                color: #BE4B16;
            }

            .goods-btn {
                width: 100rpx;
                height: 45rpx;
            }
        }
    }
</style>